iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 16
0
Modern Web

喪屍黑白切系列 第 16

Day 16 | 讓你的按鈕不只是按鈕 - hover

  • 分享至 

  • xImage
  •  

今天想要分享一些按鈕被 hover 時的效果,
我的參考來源來自以下兩個 Youtube 頻道:
Online Tutorials
DarkCode

本篇關鍵字

  • :hover
  • ::before::afterposition: absolute
  • transition
  • z-index

範例檔


HTML

<a class="btn btn1" href="#">Button</a>
<a class="btn btn2" href="#">Button</a>
<a class="btn btn3" href="#">Button</a>
<a class="btn btn4" href="#">Button</a>

CSS

body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* btn 共用樣式 */
.btn{
  display: inline-block;
  text-decoration: none;
  padding: 10px 15px;
  color: #008891;
  position: relative;
  overflow: hidden;
  margin: 0 10px;
}

/* btn1 */
.btn1{
  border: 1px solid #008891;
}

.btn1:hover{
  color: #fff;
}

.btn1::before{
  content:'';
  position: absolute;
  width: 100%;
  height: 0%;
  background-color: #008891;
  left: 0;
  top: 0;
  border-radius: 0 0 50% 50%;
  z-index: -1;
  transition: .5s;
}

.btn1:hover:before{
  height: 180%;
}

/* btn2 */
.btn2{
  transition: color .8s .2s;
}

.btn2:hover{
  color: #fff;
}

.btn2::before{
  content:'';
  position: absolute;
  left: 0;
  bottom: 0;
  top: 95%;
  width: 100%;
  background-color: #008891;
  transition: 1s;
  z-index: -1;
}

.btn2:hover:before{
  top: 0;
}

/* btn3 */
.btn3:hover{
  color: #fff;
  background-color: #008891;
  transition: .3s .8s;
}

.btn3::before,
.btn3::after{
  content:'';
  position: absolute;
  width: 10%;
  height: 20%;
  border-color: #008891;
  border-style: solid;
  transition: 1s;
}

.btn3::before{
  top: 0;
  left: 0;
  border-width: 1px 0 0 1px;
}

.btn3::after{
  bottom: 0;
  right: 0;
  border-width: 0 1px 1px 0;
}

.btn3:hover::before,
.btn3:hover::after{
  width: 100%;
  height: 100%;
}

/* btn4 */
.btn4::before{
  content:'';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #008891;
  z-index: -2;
}

.btn4:hover{
  color: #008891;
}

.btn4::after{
  content:'';
  position: absolute;
  width: 10px;
  height: 100px;
  background-color: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: -1;
  transition: .5s;
}

.btn4:hover::after{
  transform: translate(-50%, -50%) rotate(45deg);
}

喪屍分解

  • 請原諒我偷懶使用了 btn1 - btn4 這樣的命名
  • ::before::after 真的是非常非常好用的東西,這四個按鈕都有用到它們,搭配 position: absolute 的用法更是超常出現
  • 搭配 transition 就可以製造出各種效果
  • z-index 的應用,要讓東西有前後之分,否則 ::before 或是 ::after 會蓋到字

大概就是這樣的一些小範例,
當然還有其他百百種 hover 的動畫,
沒事翻翻網路學個幾招也是滿好玩的啦~
大家中秋節快樂啊!

以上就是今天的內容,如果有講不對的地方再請各位留言讓我知道,謝謝。
明天要講的是圖文互動卡片。


上一篇
Day 15 | 我的歷史成就你的現在 - 時間軸
下一篇
Day 17 | 來跟我互動一下啊 - 圖文互動卡片
系列文
喪屍黑白切30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言